<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">

    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" name="CommonForm" #NaireForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="Paper?.id">{{l("EditNaire")}} | {{Paper?.id}}</span>
                        <span *ngIf="!Paper?.id">{{l("CreateNaire")}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                      </button>
                </div>
                <div class="modal-body" style="min-height:75vh;">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="{{l('BaseMsg')}}" (selectTab)="changeTab(0)" customClass="kt-tabs__item">
                            <div class="row">
                                <div class="col-8">
                                    <div class="row">
                                        <div class="col-4">
                                            <div class="form-group kt-form__group align-items-center">
                                                <label>{{l("name")}} *</label>
                                                <input class="form-control" type="text" name="name" [(ngModel)]="Paper.name"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group kt-form__group align-items-center">
                                                <label>{{l("title")}} *</label>
                                                <input class="form-control" type="text" name="displayName" [(ngModel)]="Paper.displayName"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="col-4">
                                            <div class="form-group kt-form__group align-items-center">
                                                <label>{{l('paperUsageType')}}</label>
                                                <div class="input-group">
                                                    <select class="form-control" [(ngModel)]="Paper.paperUsageType"
                                                        name="paperUsageType" required>
                                                        <option value="0">{{l('Competition')}}</option>
                                                        <option value="1">{{l('GamePK')}}</option>
                                                        <option value="2">{{l('Vote')}}</option>
                                                        <option value="3">{{l('Investigate')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-4">
                                            <div class="form-group kt-form__group align-items-center">
                                                <label>{{l('compositionType')}}</label>
                                                <div class="input-group">
                                                    <select class="form-control" [(ngModel)]="Paper.compositionType"
                                                        name="compositionType">
                                                        <option value="0">{{l('Fixed')}}</option>
                                                        <option value="1">{{l('Random')}}</option>
                                                        <option value="2">{{l('Fixed')}} +
                                                            {{l('Random')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <label>{{l("questionCount")}}</label>
                                                <input class="form-control" type="number" name="questionsCount"
                                                    [(ngModel)]="Paper.questionsCount">
                                            </div>
                                        </div>
                                        <div class="col-4" *ngIf="Paper.compositionType==2">
                                            <div class="form-group">
                                                <label>{{l("randomCount")}}</label>
                                                <input class="form-control" type="number" name="randomCount"
                                                    [(ngModel)]="Paper.randomCount">
                                            </div>
                                        </div>
                                    </div>



                                    <div class="row">
                                        <!-- <div class="col-6">
                                            <div class="form-group kt-form__group align-items-center">
                                                <label>{{l("owner")}}</label>
                                                <input class="form-control" type="text" name="owner" [(ngModel)]="Paper.owner">
                                            </div>
                                        </div> -->
                                        <div class="form-group col-6">
                                            <label>{{l("tags")}}</label>
                                            <p-autoComplete [(ngModel)]="tags" [suggestions]="tagSuggestion"
                                                (completeMethod)="filter($event)" field="value" placeholder="tags"
                                                dataKey="id" [multiple]="true" [dropdown]="true" (onSelect)="assignTags()"
                                                (onUnselect)="assignTags()" (onBlur)="clearInput($event)" [minLength]="1"
                                                name="MultiSelectInput" inputStyleClass="form-control" styleClass="width-percent-100">
                                            </p-autoComplete>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label>{{l("fromType")}}</label>
                                                <input class="form-control" type="text" name="fromType" [(ngModel)]="Paper.fromType">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="form-group col-12">
                                            <label>{{l("description")}}</label>
                                            <textarea rows="5" style="height:100px !important;" class="form-control"
                                                name="description" [(ngModel)]="Paper.description"></textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-12">
                                            <label>{{l("extensionData")}}</label>
                                            <textarea rows="5" style="height:100px !important;" class="form-control"
                                                name="extensionData" [(ngModel)]="Paper.extensionData"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label class="control-label">{{l("Image")}}</label>
                                        <app-fileupload [fileUrl]="Paper.imageUrl" (onUpLoadEvent)="imageOnUpload($event)"
                                            accept="image/*"></app-fileupload>
                                    </div>
                                </div>
                            </div>
                        </tab>
                        <tab *ngIf="Paper.id" heading="{{l('QuestionList')}}" (selectTab)="changeTab(1)" customClass="kt-tabs__item">
                            <div class="row">
                                <form class="horizontal-form" autocomplete="off">
                                    <div class="kt-form kt-form--label-align-right">
                                        <div class="row align-items-center m--margin-bottom-10">
                                            <div class="col-3">
                                                <div class="form-group kt-form__group align-items-center">
                                                    <label>{{l('title')}}</label>
                                                    <div class="input-group">
                                                        <input (keyup.enter)="getQuestions()" [(ngModel)]="filterText" name="filterText" autoFocus
                                                            class="form-control kt-input" [placeholder]="l('SearchWithThreeDot')"
                                                            type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="form-group kt-form__group align-items-center">
                                                    <label>&nbsp;</label>
                                                    <div class="input-group">
                                                        <button type="button" class="btn btn-primary" [buttonBusy]="primengTableHelper.isLoading"
                                                            (click)="getQuestions()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-7 text-right">
                                                <button type="button" *ngIf="initPaper.compositionType!=1" class="btn btn-primary"
                                                    (click)="AddQuestion()">
                                                    <i class="fa fa-plus"></i>
                                                    {{l("AddQuestion")}}</button>
                                                <button type="button" *ngIf="initPaper.compositionType!=0" class="btn btn-primary"
                                                    (click)="AddRandomQuestionsToPaper()">
                                                    <i class="fa fa-plus"></i>
                                                    {{l("AddRandomQuestionsToPaper")}}</button>
                                                <button type="button" [disabled]="questionPublishList.length==0" class="btn btn-primary"
                                                    (click)="deleteBatch()">
                                                    <i class="icon-icon-test"></i>
                                                    {{l("deleteBatch")}}</button>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </div>


                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                                    <p-table #dataTable (onLazyLoad)="getQuestions($event)" [value]="primengTableHelper.records"
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage" [(selection)]="questionPublishList"
                                        [paginator]="false" [lazy]="false" [resizableColumns]="primengTableHelper.resizableColumns"
                                        [responsive]="primengTableHelper.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width:10%">{{l('Actions')}}</th>
                                                <th style="width: 5.0em">
                                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                </th>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>{{l('title')}}</th>
                                                <th style="width:8%" pSortableColumn="orderNo">{{l('sort')}}
                                                    <p-sortIcon field="orderNo"></p-sortIcon>
                                                </th>
                                                <th style="width:8%" pSortableColumn="score">{{l('score')}}
                                                    <p-sortIcon field="score"></p-sortIcon>
                                                </th>

                                                <th style="width:10%">{{l('type')}}</th>
                                                <!-- <th style="width:10%">{{l('questionScoreType')}}</th> -->
                                                <th>{{l('answer')}}</th>
                                                <th>{{l('tags')}}</th>
                                                <!-- <th pSortableColumn="endDate">{{l('createTime')}}
                                                                <p-sortIcon field="endDate"></p-sortIcon>
                                                            </th> -->
                                            </tr>
                                        </ng-template>

                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td>
                                                    <div class="btn-group dropdown" normalizePosition>
                                                        <button *ngIf="!record.editMode" type="button" class="btn btn-sm btn-primary"
                                                            (click)="changeEditMode(record,true)">
                                                            <i class="icon-bianji"></i>{{l("Edit")}}
                                                        </button>
                                                        <button *ngIf="record.editMode" type="button" class="btn btn-sm btn-primary"
                                                            (click)="changeEditMode(record,false)">
                                                            {{l("Cancel")}}
                                                        </button>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                </td>
                                                <td> {{transIndex(i)}}</td>
                                                <td>
                                                    <span>{{record.title}}</span>
                                                </td>
                                                <td>
                                                    <span *ngIf="!record.editMode">{{record.orderNo}}</span>
                                                    <div *ngIf="record.editMode" class="form-group kt-form__group align-items-center">
                                                        <input class="form-control" type="text" style="text-align: center;"
                                                            [ngModelOptions]="{standalone: true}" [(ngModel)]="record.newOrderNo">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span *ngIf="!record.editMode">{{record.score}}</span>
                                                    <div *ngIf="record.editMode" class="form-group kt-form__group align-items-center">
                                                        <input class="form-control" type="text" style="text-align: center;"
                                                            [ngModelOptions]="{standalone: true}" [(ngModel)]="record.newScore">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span *ngIf="record.type==0">{{l('oneChoose')}}</span>
                                                    <span *ngIf="record.type==1">{{l('multiChoose')}}</span>
                                                    <span *ngIf="record.type==2">{{l('text')}}</span>
                                                </td>
                                                <!-- <td>
                                                    <span *ngIf="record.questionScoreType==0">{{l('PartialScore')}}</span>
                                                    <span *ngIf="record.questionScoreType==1">{{l('FullScore')}}</span>
                                                </td> -->
                                                <td>
                                                    <span *ngIf="record.type!=2" style="line-height:1rem;">
                                                        <span *ngFor="let item of record.questionItems">
                                                            <span *ngIf="item.isAnswer">
                                                                <b *ngIf="item.prefix">{{item.prefix}}:</b>
                                                                {{item.content}}&nbsp;
                                                            </span>
                                                        </span>
                                                    </span>
                                                    <span *ngIf="record.type==2">{{record.answer}}</span>
                                                </td>
                                                <td>
                                                    <span *ngFor="let tag of record.tags" class="kt-badge  kt-badge--info kt-badge--inline">
                                                        {{tag.name}}
                                                    </span>
                                                    <span *ngIf="!record.tags||record.tags.length==0">
                                                        {{EmptyTdText}}
                                                    </span>
                                                </td>

                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="primengTableHelper.records">
                                                <td colspan="8">
                                                    <img class="emptymessage" src="/assets/common/images/placeholder/productHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                            (onPageChange)="getQuestions($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <addQuestionModal #addQuestionModal (modalSave)="getQuestions()"></addQuestionModal>


                        </tab>
                    </tabset>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-primary" (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-primary blue" [disabled]="(nowTab==0&&!NaireForm.form.valid)||(nowTab==1&&!canSave)"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i>
                        <span>{{l("Save")}}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>